import React, {Component} from 'react'
import {connect} from "react-redux";
import {actionCreators} from './store'


import {
    DetailWarpper,
    Header,
    Conent

} from './style'
class Detail extends Component{
    render(){
       const {title,content} = this.props;

        return(<DetailWarpper>

            <Header>
                {title}
            </Header>
            <Conent dangerouslySetInnerHTML={{ __html:content }}/>

        </DetailWarpper>)
    }
    componentDidMount(){
        this.props.getDetail(this.props.match.params.id)
    }

}
const mapState = (state)=>({
    title:state.getIn(['detail','title']),
    content:state.getIn(['detail','content'])
})

const mapDispatch=(depatch)=>({
    getDetail(id){
        depatch(actionCreators.getDatail(id))
    }
})
export default connect(mapState,mapDispatch)(Detail)